<div class="navbar bg-base-100 rounded-md shadow-lg p-4">
  <div class="navbar-start">
    <a
      class="link-hover"
      [routerLink]="['/']"
      [routerLinkActive]="['link-primary', 'font-semibold']"
      [routerLinkActiveOptions]="{ exact: true }"
    >
      Welcome
    </a>
    <!-- <a class="btn btn-ghost normal-case text-xl">daisyUI</a> -->
  </div>
  <div class="navbar-center">
    <a
      class="link-hover"
      [routerLink]="['/tabs']"
      [routerLinkActive]="['link-primary', 'font-semibold']"
    >
      Tabs
    </a>
  </div>
  <div class="navbar-end">
    <a
      class="link-hover"
      [routerLink]="['/about']"
      [routerLinkActive]="['link-primary', 'font-semibold']"
    >
      About
    </a>
  </div>
</div>

<main class="mt-6 h-screen flex justify-center">
  <router-outlet></router-outlet>
</main>
